<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方法10个属性）
		   1.控制字体：font-family  font-size  font-weight
		   2控制文本布局：text-aglin、line-height、letter-spacing、word-spacing
		   3.文本修饰效果：text-decoration、text-shadow
		   4.处理文本效果:white-space
		 
		 -->
		 <style>
			 /*css3语法：选择器{
				         属性：属性值；
						 属性：属性值；
						 .....
			            }
						叫法：一个样式
			 */
			bod y div#d1{
				color: #ffff00;
				/* 知识点1：文本格式化属性控制字体 */
				font-family: 华文彩云,sans-serif;
				/* 设置多个字体；浏览器会按照顺序寻找可以字体
				 用户体验，用户有什么字体，优先指定字体
				 通常与统配选择器使用  *{}
				 */
				/* 知识点2:文本格式化属性控制字体
				 font-size：字体大小属性，与单位共存
				 单位  px 像素  使用特点：绝对值、PC值
				 em 相对单位，理解：倍数
				             使用特点：相对与父元素按照倍数方式、移动端
				 */
				/* 知识点3：文本格式化属性控制字体
				 font-weight：字体粗细属性，不存在单位
				           属性值：数值【100 200 300 ...900】
						        常用数值：400
						         单词【400==normal、bold、light】*/
								 font-weight: 900;
								font-size: 2em;
								text-transform: uppercase;
								text-transform: capitalize;
								text-indent: 200px;
			/* 补充：1.英文大写；2.首字母大写；3.段落开始间距 */					
			}
			div#d1{ /* 通过加权方式，锁定元素  权值：101*/
			color: #00ffff;
				/* 知识点4：文本格式化属性控制文本格式
				 text-align: 文本
				 Left|right|center|justify:两端对齐;*/
				 text-align: justify;
				/* 知识点5：文本格式化属性控制文本格式 
				行高属性line-height：文本垂直效果
				使用方法：1.高度属性
				         2.在高度属性上加行高:属性值一致*/
				border: 1px solid red;
				height: 100px;
				line-height: 100px;
				/* 补充：文本对齐和行高对齐|间隙：字符和单词之间的距离 */
				/* 知识点6：letter-spacing：设置字符之间间隙
				            word-spacing: 设置单词之间间隙;
							*/
				letter-spacing: 10px;
				word-spacing: 10px;		   
			}
			#d1{  /* 权值：100*/
			
				color: #e4393c;
				
			}
			a.c1{/* 权值：11 */
			/* 知识点8：text-decoration 修饰超链接样式
			 使用方法：与通配符一起使用，设置全局页面超链接样式
			 属性值:none|underline|line-through
			 */
			text-decoration: line-through;
			/* 知识点9：text-shadow 修饰文本阴影
			  属性值：X轴  Y轴  blur模糊距离 color*/
			  text-shadow: 5px 5px 5px #ff0;
			  }
			  p{
				  border: 1px soli;
				  /* 知识点10：文本换行效果
				  white-space：文本换行属性
				  属性值：
				  nowrap 不换行，只显示一行，超出部分隐藏
				  |pre保存空格和回车|normal默认，空格合并，换行隐藏
				  */
				 white-space: pre;
				 overflow: hidden;
			  }
			 
		 </style>
	</head>
	<body>
		<!-- 需求：创建div同时指定别名，添加假文【tab】
		          id选择器，通过加权找到div，添加颜色
		 -->
		 <div id="d1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid amet autem libero veniam voluptates at accusantium optio quos reprehenderit. Recusandae harum repudiandae id. Labore alias totam repellat doloremque, itaque nulla?</div>
	     <hr >
		 <h4>文本修饰效果</h4>
		 <!-- 文本修饰相关属性：设置超链接效果-->
		 <a class="c1 c2" href="http://www.tsgzy.edu.cn">实现跳转【方式：6种】</a>
		 <div style="height: 800px;"></div>
		 <marquee >
			 <h4>处理文本效果</h4>
		 </marquee>
	</body>
</html>